<template>
    <div class="main_home">
        <div class="r_title">热门文档</div>
        <div class="list">
            <nuxt-link
                class="item"
                v-for="(item, index) in hotDocumentList"
                :key="index"
                :to="'/templates/' + item.id + '.html'"
                target="_blank"
            >
                <div class="item_img">
                    <!-- <el-image class="img"  :src="baseUrl + item.pic" fit="cover"></el-image> -->
                    <el-image class="img" :src="baseUrl + item.pic" fit="fill">
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                </div>
                <div class="item_title">{{ item.title }}</div>
            </nuxt-link>
        </div>
    </div>
</template>
<script>
export default {
    name: "recommendedReading",
    props: {
        hotDocumentList: {
            type: Array,
            default: () => {
                return [];
            },
        },
    },
    data() {
        return {
            baseUrl: "https://xzcs-video.oss-cn-beijing.aliyuncs.com",
        };
    },
    methods: {
       
    },
    created() {},
    mounted() {},
    watch: {},
};
</script>
<style lang="scss" scoped>
.main_home {
    width: 100%;
    background: #fff;
    padding: 30px 35px;

    .r_title {
        font-size: 18px;
        font-weight: 500;
        color: #333333;
        line-height: 17px;
    }

    .list {
        margin-top: 33px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        border-top: 1px solid #f3f3f3;

        .item {
            display: block;
            flex-basis: 20%;
            margin-bottom: 30px;
            cursor: pointer;

            &:hover .item_title {
                color: #1c87f3;
            }

            .item_img {
                width: 160px;
                height: 103px;
                background: #faf9f8;
                border: 1px solid #e2e2e2;
                display: flex;
                justify-content: center;
                position: relative;

                .img {
                    width: 121px;
                    height: 100%;

                    ::v-deep .image-slot {
                        display: inline-block;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }
                }
            }

            .item_title {
                margin-top: 6px;
                font-size: 14px;
                font-weight: 400;
                color: #333333;
                line-height: 20px;
                //多行文本溢出显示省略号
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                /*设置对齐模式*/
                -webkit-line-clamp: 2;
                /*设置多行的行数，示例为2行*/
            }

            &:nth-last-child(-n + 4) {
                margin-bottom: 0;
            }
        }
    }
}
</style>